<template>
	<div class="about" id='container000'>
		<h1>This is an about page</h1>
		<button @click="clickMe" type="button" class="btn btn-primary">点我</button>
		<button @click="exportPdf" type="button" class="btn btn-primary">点我导出pdf</button>
		<p>Message is: {{ message }}</p>
		<input v-model="message" placeholder="edit me" />
		<p />
	</div>
	<hr/>
	<span class="label label-default">默认标签</span>
	<span class="label label-primary">主要标签</span>
	<span class="label label-success">成功标签</span>
	<span class="label label-info">信息标签</span>
	<span class="label label-warning">警告标签</span>
	<span class="label label-danger">危险标签</span>
	<hr/>
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-success">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-warning">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-danger">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>

	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-success">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-warning">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-danger">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-success">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-warning">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-danger">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-success">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-warning">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-danger">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-success">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-warning">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-danger">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-success">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-info">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-warning">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>
	<div class="panel panel-danger">
		<div class="panel-heading">
			<h3 class="panel-title">面板标题</h3>
		</div>
		<div class="panel-body">
			这是一个基本的面板
		</div>
	</div>

	<!-- 置顶 -->
	<div class="media">
		<div class="media-body">
			<h4 class="media-heading">置顶</h4>
			<p>这是一些示例文本...</p>
		</div>
	</div>

	<!-- 居中对齐 -->
	<div class="media">

		<div class="media-body">
			<h4 class="media-heading">居中</h4>
			<p>这是一些示例文本...</p>
		</div>
	</div>

	<!-- 置底 -->
	<div class="media">

		<div class="media-body">
			<h4 class="media-heading">置底</h4>
			<p>这是一些示例文本...</p>
		</div>
	</div>
	<div class="progress progress-striped">
		<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0"
			aria-valuemax="100" style="width: 90%;">
			<span class="sr-only">90% 完成（成功）</span>
		</div>
	</div>
	<div class="progress progress-striped">
		<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="60" aria-valuemin="0"
			aria-valuemax="100" style="width: 30%;">
			<span class="sr-only">30% 完成（信息）</span>
		</div>
	</div>
	<div class="progress progress-striped">
		<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0"
			aria-valuemax="100" style="width: 20%;">
			<span class="sr-only">20% 完成（警告）</span>
		</div>
	</div>
	<div class="progress progress-striped">
		<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0"
			aria-valuemax="100" style="width: 10%;">
			<span class="sr-only">10% 完成（危险）</span>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import htmlToPdf from '@/components/htmlToPdf'
	import util from '@/components/util';
	import { onMounted, ref } from 'vue';


	const message = ref('')
	function clickMe() {
		message.value = util.test(message.value);
	};
	onMounted(() => {
		message.value = "12313112"
	})
	function exportPdf() {
		if (confirm("确认导出pdf?")) {
			const dom : HTMLElement = <HTMLElement>document.getElementById("container000");
			htmlToPdf.myExportPdf('test', dom);
		} else {
			alert("已取消")
		}
	}
</script>